<template>
  <div style="width: 100%">
    <div class="header">
      <div @click="activeTab=1" :class="{'active':activeTab===1}">菜单配置</div>
      <div @click="activeTab=2" :class="{'active':activeTab===2}">菜单权限</div>
      <div @click="activeTab=3" :class="{'active':activeTab===3}">高级扩展</div>
    </div>

    <div class="gap-header"></div>

    <div class="container">
      <template>
        <div class="menu" v-show="activeTab === 1">
          <basic-container>
            <avue-crud :option="option"
                       :table-loading="loading"
                       :data="data"
                       ref="crud_1"
                       @tree-load="treeLoad">
              <template slot="menuLeft">
                <el-button size="small" type="primary"
                           @click="addToTabsList('菜单',{oid:-1},'menuTemp','open')">
                  新建菜单
                </el-button>
              </template>

              <template slot="name" slot-scope="{row}">
            <span class="column-btn"
                  @click="addToTabsList(row.name+'菜单',row,'menuTemp','edit')">
              {{ row.name }}
            </span>
              </template>

              <template slot="menu" slot-scope="{row}">
                <el-button type="text"
                           @click="addToTabsList(row.name+'菜单',row,'menuTemp','edit')">
                  编辑
                </el-button>
                <el-button type="text"
                           @click="addToTabsList(row.name+'菜单',row,'menuTemp','addChild')">
                  新增子路由
                </el-button>
                <el-button type="text" @click="remove(row)">删除</el-button>
              </template>
            </avue-crud>
          </basic-container>
        </div>
      </template>

      <template>
        <div class="jurisdiction" v-show="activeTab === 2">
          <basic-container>
            <!-- <m-s-search :list="jurisdiction.option.column"></m-s-search> -->
            <avue-crud :option="jurisdiction.option"
                       :data="jurisdiction.data"
                       :page.sync="jurisdiction.page"
                       ref="crud_2">
              <template slot="menuLeft">
                <el-button type="primary" size="small"
                           @click="addToTabsList('权限',{oid:-1},'jurisdictionTemp','open')">
                  新增授权
                </el-button>
                <!--<el-button size="small">修改授权</el-button>-->
                <!--                <el-button size="small" @click="delJurisdiction">删除授权</el-button>-->
              </template>

              <template slot="partyList" slot-scope="{row}">
                <div class="column-btn"
                     @click="addToTabsList(row.name+'权限',row,'jurisdictionTemp','view')">
                  {{ row.partyList.map(i => i.name).join("，") }}
                </div>
              </template>
              <template slot="menuList" slot-scope="{row}">
                {{ row.menuList.map(i => i.name).join("，") }}
              </template>

              <template slot="menu" slot-scope="{row}">
                <el-button type="text"
                           @click="addToTabsList(row.name+'权限',row,'jurisdictionTemp','view')">
                  查看
                </el-button>
                <el-button type="text"
                           @click="addToTabsList(row.name+'权限',row,'jurisdictionTemp','edit')">
                  编辑
                </el-button>
                <el-button type="text" @click="delJurisdiction(row)">删除</el-button>
              </template>
            </avue-crud>
          </basic-container>
        </div>
      </template>

      <template>
        <div v-show="activeTab === 3"></div>
      </template>
    </div>
    <ms-drawer :tab-list.sync="tabsList" :visible.sync="visible" @refresh="refresh"></ms-drawer>
  </div>
</template>
<script>
import MenuDialog from "@/views/subApp/menuDialog.vue";
import * as api from "@/api/menu/index"
import MSSearch from "@/DMDComponents/MSSearch.vue";

export default {
  name: "sub",
  components: {MSSearch, MenuDialog},
  data() {
    return {
      applications: [],
      activeTab: 1,
      data: [],
      loading: false,
      option: {
        height: 'auto',
        calcHeight: 10,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: false,
        labelWidth: 120,
        menuWidth: 200,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: true,
        rowKey: 'oid',
        rowParentKey: 'parentId',
        tree: true,
        lazy: true,
        column: [
          {
            align: "left",
            label: "菜单名称",
            prop: "name",
            slot: true,
          },
          {
            label: "菜单类型",
            prop: "alias",
          },
          {
            label: "路由",
            prop: "path",
          },
          {
            label: "排序",
            prop: "orders",
          },
          {
            label: "权限标识",
            prop: "code",
          },
          {
            label: "状态",
            prop: "enableFlag",
            align: "center",
            dicData: [
              {
                label: "启用",
                value: 1
              },
              {
                label: "停用",
                value: 0
              },
            ]
          }
        ]
      },

      jurisdiction: {
        data: [],
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 1
        },
        option: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: false,
          selection: false,
          labelWidth: 120,
          menuWidth: 200,
          viewBtn: false,
          dialogClickModal: false,
          tabs: true,
          delBtn: false,
          addBtn: false,
          editBtn: false,
          refreshBtn: false,
          columnBtn: false,
          align: "center",
          menu: true,
          rowKey: 'oid',
          rowParentKey: 'parentId',
          tree: true,
          lazy: true,
          column: [
            {
              align: "left",
              label: "用户集合",
              prop: "partyList",
              slot: true,
              msSearch: true,
            },
            {
              label: "菜单权限标识",
              prop: "roleCodes",
            },
            {
              align: "left",
              label: "授权菜单",
              prop: "menuList",
              slot: true
            },
            {
              label: "创建时间",
              prop: "createTime",
            }
          ]
        },
      },

      visible: false,
      tabsList: [],
    }
  },
  methods: {
    remove(row) {
      this.$confirm("是否删除?").then(() => {
        api.del({oid: row.oid}).then(() => {
          this.$message.success("删除成功");
          this.getMenu();
        })
      })
    },
    // 向抽屉中添加tab页 根据 oid 去重
    addToTabsList(title, row, component, type) {
      let ids = this.tabsList.map(item => item.row.oid);
      if (!ids.includes(row.oid)) {
        this.tabsList.push({title, row, component, type})
      }
      this.visible = true;
    },

    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.oid + "";
      api.getMenuList({parentId}).then(res => {
        resolve(res.data.data);
      })
    },

    getMenu(clientId) {
      clientId = localStorage.getItem("appId")
      this.data = [];
      api.getMenuList({parentId: 0, clientId: clientId}).then(res => {
        this.data = res.data.data;
        this.$refs["crud_1"] && this.$refs["crud_1"].refreshTable();
      })
    },

    getJurisdiction() {
      this.jurisdiction.data = [];
      api.getJurisdiction({
        page: this.jurisdiction.page.currentPage,
        size: this.jurisdiction.page.pageSize
      }).then(res => {
        let {totalRows, list} = res.data.data;
        this.jurisdiction.page.total = totalRows;
        this.jurisdiction.data = list;
        this.$refs["crud_2"] && this.$refs["crud_2"].refreshTable();
      })
    },
    refresh() {
      if (this.activeTab === 1) {
        this.getMenu()
      } else {
        this.getJurisdiction()
      }
    },
    delJurisdiction(row) {
      this.$confirm("是否删除").then(() => {
        api.delJurisdiction({oid: row.oid}).then(() => {
          this.$message.success("删除成功");
          this.getJurisdiction();
        })
      })
    }
  },
  mounted() {
    this.getMenu();
    this.getJurisdiction();
  },
  watch: {
    activeTab: {
      handler() {
        this.visible = false;
        this.tabsList = [];
      }
    }
  }
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  padding-bottom: 10px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  > div {
    margin: 0 30px;
    padding: 20px 0 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    //transition: all .4s;
    cursor: pointer;
  }

  .active {
    border-bottom: 2px solid #409EFF;
    color: #409EFF;
  }
}

.gap-header {
  height: 10px;
}

.container {
  width: 100%;
  height: calc(100% - 54px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  //padding: 10px;
  background: #F0F2F5;
  box-sizing: border-box;

  .menu {
    width: 100%;
    height: 100%;
  }

  .jurisdiction {
    width: 100%;
    height: 100%;
  }
}
</style>
